﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>register payment</title>
<link rel="stylesheet" type="text/css" href="./styles/core.css" />
<link rel="stylesheet" type="text/css" href="./styles/jquery/jquery-ui-1.8.15.custom.css" />
<script type="text/javascript" src="./javascripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="./javascripts/jquery-ui-1.8.15.custom.min.js"></script>
</head>
<body>
<div id="header" class="layout">#header</div>
<div id="nav" class="layout">#navigation</div>
<div id="main"  class="layout">
	<ul class="menu">
		<li class="nav_on">Credit</li>
		<li>PayPay</li>
		<li>Western Union</li>
		<li>Wire transfer</li>
	</ul>
	<div class="pay1">
		<form action="">
			Card Type:<br/>
			<select name="" id="">
				<option value="">Visa</option>
				<option value="">Visa</option>
			</select><br/>
			Card No.:<br/>
			<input type="text" name="" id="" /><br/>
			Card Holder Name:<br/>
			<input type="text" name="" id="" /><br/>
			Expiration Date:<br/>
			<select name="" id="">
				<option value="">Month</option>
				<option value=""></option>
			</select>
			<select name="" id="">
				<option value="">Year</option>
				<option value=""></option>
			</select><br/>
			Security Code:<br/>
			<input type="text" name="" id="" /><br/>
		</form>
	</div>
	<div class="pay2">
		<form action="">
			Card Type:<br/>
			<select name="" id="">
				<option value="">Visa</option>
				<option value="">Visa</option>
			</select><br/>
			<select name="" id="">
				<option value="">Month</option>
				<option value=""></option>
			</select>
			<select name="" id="">
				<option value="">Year</option>
				<option value=""></option>
			</select><br/>
			Security Code:<br/>
			<input type="text" name="" id="" /><br/>
		</form>
	</div>
	<div class="pay3">
		<form action="">
			Card Type:<br/>
			<select name="" id="">
				<option value="">Visa</option>
				<option value="">Visa</option>
			</select><br/>
			Security Code:<br/>
			<input type="text" name="" id="" /><br/>
		</form>
	</div>
	<div class="pay4">
		<form action="">
			Card No.:<br/>
			<input type="text" name="" id="" /><br/>
			Security Code:<br/>
			<input type="text" name="" id="" /><br/>
		</form>
	</div>
	<div class="pay"><button style="width:100px;position:absolute;right:300px;bottom:20px;cursor:pointer;">Pay</button></div>
</div>
<script type="text/javascript">
$('.menu li').click(function(){
	$(this).addClass('nav_on');
	$(this).prevAll().removeClass('nav_on');
	$(this).nextAll().removeClass('nav_on');
	for(var i=1;i<=$('.menu li').length;i++){
		if(i==($('.menu li').index($(this))+1)){
			$('.pay'+i).show();
		}else{
			$('.pay'+i).hide();
		}
	}
});
$('.menu li:first').click();
</script>
</body>
</html>